<template>
    <div class="export-data inline">
        <popup
            ref="dialog"
            title="导出设置"
            width="500px"
            top="35vh"
            confirm-button-text="确认导出"
            @confirm="handleConfirm"
            :async="true"
            @open="handleOpen"
        >
            <template #trigger>
                <el-button>导出</el-button>
            </template>
            <div>
                <el-form ref="form" :model="formData" label-width="120px" size="small">
                    <el-form-item label="数据量：">
                        预计导出{{ exportData.count }}条数据，共{{ exportData.sum_page }}页，每页{{
                            exportData.page_size
                        }}条数据
                    </el-form-item>
                    <el-form-item label="导出限制：">
                        每次导出最大允许{{ exportData.max_page }}页，共{{
                            exportData.all_max_size
                        }}条数据
                    </el-form-item>
                    <el-form-item label="导出范围：">
                        <el-radio-group v-model="formData.page_type">
                            <el-radio :label="0">全部导出</el-radio>
                            <el-radio :label="1">分页导出</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="分页范围：" v-if="formData.page_type == 1">
                        <div class="flex">
                            <el-input
                                style="width: 100px"
                                v-model="formData.page_start"
                                placeholder=""
                            ></el-input>
                            <span class="flex-none m-l-8 m-r-8">页，至</span>
                            <el-input
                                style="width: 100px"
                                v-model="formData.page_end"
                                placeholder=""
                            ></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="导出文件名称：" prop="file_name">
                        <el-input
                            v-model="formData.file_name"
                            placeholder="请输入导出文件名称"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </popup>
    </div>
</template>

<script lang="ts" setup>
import Popup from '@/components/popup/index.vue'
import { ElLoading } from 'element-plus'

const props = defineProps<{
    method: (params: any) => Promise<any>
    param: object
    pageSize: number
    userId?: number
    type?: string
}>()

const popupRef = shallowRef<InstanceType<typeof Popup>>()
const formData = ref({
    page_type: 0,
    page_start: 1,
    page_end: 200,
    file_name: ''
})

const handleOpen = () => {
    getData()
}

const handleConfirm = () => {
    const loading = ElLoading.service({
        lock: true,
        text: '正在导出中...',
        spinner: 'el-icon-loading'
    })
    props
        .method({
            export: 2,
            ...props.param,
            ...formData.value,
            user_id: props.userId,
            type: props.type,
            page_size: props.pageSize
        })
        .then(() => {
            popupRef.value?.close()
        })
        .finally(() => {
            loading.close()
        })
}

const exportData = ref<any>({})
const getData = () => {
    props
        .method({
            ...props.param,
            export: 1,
            user_id: props.userId,
            type: props.type,
            page_size: props.pageSize
        })
        .then((res: any) => {
            exportData.value = res
            formData.value.file_name = res.file_name
            formData.value.page_end = res.page_end
            formData.value.page_start = res.page_start
        })
}
</script>
